<template>
  <div class="app-container">
    <span style="font-size:20px;color:#EF7B08">| 商品基本信息</span>
    <el-form style="margin-top:20px" :inline="true" :model="form" label-width="80px">
        <el-form-item label="商品名称:">
            <el-input :disabled="true" v-model="form.infoName"></el-input>
        </el-form-item>
        <el-form-item label="商品分类:">
            <el-input :disabled="true" v-model="form.catName"></el-input>
        </el-form-item>
    </el-form>
    <span style="font-size:20px;color:#EF7B08">| 商品规格信息</span>
    <el-form  style="margin-top:20px;margin-bottom:30px">
    <el-table
      :data="proPriceVos"
      size="small"
      border
      fit
      highlight-current-row
      style="width: 70%;margin-top:1%"
    >
        <el-table-column label="序号" type="index">
        </el-table-column>
        <el-table-column label="规格图" width="200px" align="center">
            <template slot-scope="scope">
            <img :src="scope.row.photoUrl" style="width:200px;height:200px" alt="">
            </template>
        </el-table-column>
        <el-table-column label="规格" min-width="150px" align="center">
            <template slot-scope="scope">
            <span>{{ scope.row.proTitle }}</span>
            </template>
        </el-table-column>
        <el-table-column label="售价" width="150px" align="center">
            <template slot-scope="scope">
            <span>{{ scope.row.proSellPrice }}</span>
            </template>
        </el-table-column>
        <el-table-column label="市场价" width="150px" align="center">
            <template slot-scope="scope">
            <span>{{ scope.row.proMarketPrice }}</span>
            </template>
        </el-table-column>
        <el-table-column label="成本价" width="150px" align="center">
            <template slot-scope="scope">
            <span>{{ scope.row.proPurchansePrice }}</span>
            </template>
        </el-table-column>
        </el-table>
    </el-form>
    <span style="font-size:20px;color:#EF7B08">| 商品参数信息</span>
    <el-form  style="margin-top:20px;margin-bottom:30px">
    <el-table
      :data="proParamDTOS"
      size="small"
      border
      fit
      highlight-current-row
      style="width: 70%;margin-top:1%"
    >
        <el-table-column label="序号" type="index">
        </el-table-column>
        <el-table-column label="参数名称" width="500px" align="center">
            <template slot-scope="scope">
            <span>{{ scope.row.informationBarTitle }}</span>
            <!-- <img :src="scope.row.imgUri" style="width:300px;height:200px" alt=""> -->
            </template>
        </el-table-column>
        <el-table-column label="参数内容" min-width="150px" align="center">
            <template slot-scope="scope">
            <span>{{ scope.row.informationBarContents }}</span>
            </template>
        </el-table-column>
        </el-table>
    </el-form>
    <span style="font-size:20px;color:#EF7B08">| 橱窗图片</span>
    <el-form  style="margin-top:20px;margin-bottom:30px">
      <div style="width:302px;height:302px;border:1px solid #DFE6EC">
        <img :src="imageUrl" alt="" style="width:300px;height:300px">
      </div>
    </el-form>
    <span style="font-size:20px;color:#EF7B08">| 轮播图片</span>
    <el-form  style="margin-top:20px;margin-bottom:30px">
      <div  style="width:100%;height:302px">
        <img v-for="(item,index) in slideShowImageUrl" :key="index" :src="item" alt="" style="width:300px;height:300px;float:left;border:1px solid #DFE6EC;margin-left:1%">
      </div>
    </el-form>
    <span style="font-size:20px;color:#EF7B08">| 详情图片</span>
    <el-form style="margin-top:20px;margin-bottom:30px">
      <div  style="width:100%;height:302px">
        <img v-for="(item,index) in proDetailImageUrl" :key="index" :src="item" alt="" style="width:300px;height:300px;float:left;border:1px solid #DFE6EC;margin-left:1%">
      </div>
    </el-form>
    <el-dialog
        title="填写审核不通过原因"
        :visible.sync="seizureShow"
        width="60%"
        center
        append-to-body
        label-position='right'
        :close-on-click-modal="false"
      >
        <div>
          <el-input
            v-model="reason"
            :disabled="true"
            placeholder="请填写审核不通过原因，不得超过300字。"
            size="small"
            :rows="6"
            type="textarea"
          ></el-input>
        </div>
      </el-dialog>
  </div>
</template>   

<script>
  import Vue from 'vue'
  import {getData} from "@/api/verifybusinessresult/index";
  export default {
    data() {
      return {
        form:{},
        proPriceVos:[],
        proParamDTOS:[],
        imageUrl:'',
        slideShowImageUrl:[],
        proDetailImageUrl:[],
        seizureShow:false,
        reason:''
      }
    },
    props: {
      changeShow: {
        type: Boolean,
        required: true
      },
      proId:{
        type: String,
        required: true
      }
    },
    methods: {  
      //当前数据
      getList(proId){
        getData(proId).then(res=>{
            if(res.data.reason!==null){
                this.seizureShow=true
                this.reason=res.data.reason
            }
            this.form=res.data
            this.proPriceVos=res.data.proPriceVos
            this.proParamDTOS=res.data.proParamDTOS
            this.imageUrl=res.data.imageUrl
            this.slideShowImageUrl=res.data.slideShowImageUrl
            this.proDetailImageUrl=res.data.proDetailImageUrl
        })
      },
    }
  }
</script>

<style scoped>
  .editor-content {
    padding-left: 5px;
  }
</style>